<template>
  <el-container>
    <!-- 头部开始 -->
    <el-header> 
        <section>
          <i class="el-icon-s-fold"><span>财务中心</span></i> 
        </section>      
        <section>
          <i class="el-icon-search"></i>
          <i class="el-icon-bell">
            <img src="../assets/u28.jpg"> 
              <span>{{this.$store.state.loginName}}</span>
          </i>     
      </section>
    </el-header>
    <!-- 头部结束 -->
    <!-- 内容开始 -->
    <el-main>
      <div class="main-box">
      <!-- 订单列表 -->
      <div class="main-list">
        <div class="main-list-tab">
          <ul>
            <li class="active">工资</li>
            <li>员工工资管理</li>
            <li>老师课时费设置</li>
          </ul>
          <div class="list-con-select">
            <div class="select-box">
              <em>校   区 :</em>
              <el-select v-model="value1" placeholder="宝安校区" class="allkinds">
                <el-option
                  v-for="item in options1"
                  :key="item.value1"
                  :label="item.label"
                  :value="item.value1"
                ></el-option>
              </el-select>
            </div>
            <div class="select-box">
              <em>年-月：</em>
              <el-date-picker
                  v-model="value4"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                ></el-date-picker>
            </div>
            <div class="select-box">
              <em>搜索：</em>
              <el-select v-model="value3" placeholder="员工" class="selected1">
                <el-option
                  v-for="item in options3"
                  :key="item.value3"
                  :label="item.label"
                  :value="item.value3"
                ></el-option>
              </el-select>
              <el-input v-model="input" placeholder="请输入内容" class="search" @input="handleInput()"></el-input>
              <i class="el-icon-search search-btn"></i>
            </div>
          </div>
        </div>
        <div class="main-list-content">
          <div class="list-con-msg">
              <p class="con-msg-title">九月份工资</p>
              <div class="msg-box">
                <span>条数：<em style="color:#FF0000">13</em> 条</span>
                <span>预计结算金额：34567元</span>
                <button class="startSend">开始发放</button>
                <button>导出</button>
              </div>
          </div>
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100% height:100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection"></el-table-column>
            <el-table-column label="序号" width="50px">
              <template slot-scope="scope">{{ scope.row.date }}</template>
            </el-table-column>
            <el-table-column prop="name" label="员工姓名" width="100px"></el-table-column>
            <el-table-column prop="character" label="角色" width="50px"></el-table-column>
            <el-table-column prop="price" label="基本工资" ></el-table-column>
            <el-table-column prop="tuitionFee" label="课时费" ></el-table-column>
            <el-table-column prop="communicationSubsidy" label="通讯补贴"></el-table-column>
            <el-table-column prop="riceTonic" label="饭补" width="60px"></el-table-column>
            <el-table-column prop="housingAllowance" label="住房补贴"></el-table-column>
            <el-table-column prop="transportationAllowance" label="交通补贴"></el-table-column>
            <el-table-column prop="fiveInsurance" label="五险"></el-table-column>
            <el-table-column prop="total" label="总计"></el-table-column>
            <el-table-column prop="remark" label="备注" width="90px"></el-table-column>
            <el-table-column prop="releaseStatus" label="发放状态"></el-table-column>
            <el-table-column prop="operating" label="操作" width="150px">
              <template slot-scope="scope">
                <el-button  type="text"  @click="handleSend(scope.$index, scope.row)">开始发放</el-button>
                <el-button type="text" size="mini"  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      </div>
    </el-main>
    <!-- 编辑弹出框 -->
    <el-dialog title="编辑老师工资" :visible.sync="editVisible">
      <el-form ref="formLabelAlign" :model="formLabelAlign" label-width="120px">
        <el-form-item label="基本工资：">
          <el-input v-model="formLabelAlign.price"></el-input>
        </el-form-item>
        <el-form-item label="交通补贴：">
          <el-input v-model="formLabelAlign.transportationAllowance"></el-input>
        </el-form-item>
        <el-form-item label="课时费：">
          <el-input v-model="formLabelAlign.tuitionFee"></el-input>
        </el-form-item>
        <el-form-item label="五险：">
          <el-input v-model="formLabelAlign.fiveInsurance"></el-input>
        </el-form-item>
        <el-form-item label="饭补：">
          <el-input v-model="formLabelAlign.riceTonic"></el-input>
        </el-form-item>
        <el-form-item label="住房补贴：">
          <el-input v-model="formLabelAlign.housingAllowance"></el-input>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="formLabelAlign.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveEdit">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 内容结束 -->
  </el-container>
</template>
<script>
export default {
  name: "finance-item1",
  mounted(){
    this.$axios
      .get("/app/mock/264777/example/1598250282730")
      .then((res) => {
        this.tableData = res;
        this.tableData1 = res;
        console.log(this.tableData)
      })
      .catch((err) => console.log(err));
  },
  data() {
    return {
      input: "",
      value: "", //校区
      options1: [
        {
          value: "选项1",
          label: "宝安校区",
        },
        {
          value: "选项2",
          label: "南山校区",
        },
        {
          value: "选项3",
          label: "福田校区",
        },
        {
          value: "选项4",
          label: "罗湖校区",
        },
        {
          value: "选项5",
          label: "盐田校区",
        },
      ],
      value1: "", //订单种类
      options2: [
        {
          value2: "选项1",
          label: "交易成功",
        },
        {
          value2: "选项2",
          label: "交易关闭",
        },
        {
          value2: "选项3",
          label: "已退费",
        },
        {
          value2: "选项4",
          label: "未支付",
        },
      ],
      value2: "", //订单状态
      options3: [
        {
          value3: "选项1",
          label: "员工",
        },
      ],
      value3: "", //搜索
      value4: "", //交易日期
      tableData: [
        {
          date:"1",
          name:"王茜茜老师",
          character:"老师",
          price:"3000元",
          tuitionFee:"1029元",
          communicationSubsidy:"100元",
          riceTonic:"100元",
          housingAllowance:"100元",
          transportationAllowance:"100元",
          fiveInsurance:"-360元",
          total:"4599元",
          remark:"这里是备注",
          releaseStatus:"待发放",
        },
        {
          date:"2",
          name:"孙骁骁老师",
          character:"老师",
          price:"3000元",
          tuitionFee:"1029元",
          communicationSubsidy:"100元",
          riceTonic:"100元",
          housingAllowance:"100元",
          transportationAllowance:"100元",
          fiveInsurance:"-360元",
          total:"4599元",
          remark:"这里是备注",
          releaseStatus:"待发放",
        },
        {
          date:"3",
          name:"苏千千老师",
          character:"老师",
          price:"2800元",
          tuitionFee:"1029元",
          communicationSubsidy:"100元",
          riceTonic:"100元",
          housingAllowance:"100元",
          transportationAllowance:"100元",
          fiveInsurance:"-360元",
          total:"4599元",
          remark:"这里是备注",
          releaseStatus:"待发放",
        },
        {
          date:"4",
          name:"黄华华老师",
          character:"老师",
          price:"3000元",
          tuitionFee:"1029元",
          communicationSubsidy:"100元",
          riceTonic:"100元",
          housingAllowance:"100元",
          transportationAllowance:"100元",
          fiveInsurance:"-360元",
          total:"4599元",
          remark:"这里是备注",
          releaseStatus:"待发放",
        },
        {
          date:"5",
          name:"季南老师",
          character:"老师",
          price:"3000元",
          tuitionFee:"1029元",
          communicationSubsidy:"100元",
          riceTonic:"100元",
          housingAllowance:"100元",
          transportationAllowance:"100元",
          fiveInsurance:"-360元",
          total:"4599元",
          remark:"这里是备注",
          releaseStatus:"待发放",
        }
      ],
      tableData1: [],
      multipleSelection: [],
      editVisible: false, //编辑老师弹窗的显示隐藏
      labelPosition: 'right',
      formLabelAlign: {}
    };
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 关闭弹出框
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    // 搜索框过滤
    handleInput() {
      console.log(this.input);
      var newlist = this.tableData1.filter(
        (item) => item.name.indexOf(this.input) > -1
      );
      // console.log(newlist);
      this.tableData = newlist;
      if (this.input == "") {
        this.tableData = this.tableData1;
      }
    },
    // 开始发放
    handleSend(index, row){
      console.log(row)
      row.releaseStatus="已完成"
      this.formLabelAlign = row;
    },
    // 编辑
    handleEdit(index, row) {
      // console.log(row);
      this.idx = index;
      this.formLabelAlign = row;
      this.editVisible = true;
    },
    // 保存编辑
    saveEdit() {
      this.editVisible = false;
      this.$message.success(`修改第 ${this.idx + 1} 行成功`);
      this.$set(this.tableData, this.idx, this.formLabelAlign);
    },
  },
};
</script>
<style>
.has-gutter>tr{
  color:#272727;
}
.el-table th, .el-table>tr:first-child{
  background-color:#FAFAFA;
}
</style>
<style scoped>
/* 清除默认样式 */
ul {
  list-style: none;
}
em,
i {
  font-style: normal;
}
input {
  outline: none;
}
/* 头部开始 */
.el-header{
  display: flex;
  justify-content: space-between;
  line-height: 65px !important;
  color: #5A5A5A;
}
.el-header img{
  width: 26px;
  height: 26px;
  margin-left: 8px;
}
.el-header span{
  font-size: 14px;
  margin-left: 10px;
  margin-top: -10px !important;
}
.el-header i{
  margin-right: 20px;
}
/* 头部结束 */
/* 内容开始 */
.main-box{
  width: 1200px;
}
.main-campus {
  width: 1200px;
  height: 60px;
  /* background:#fff; */
  position: relative;
}
.main-campus pre {
  position: absolute;
  right: 280px;
  top: 14px;
  font-size: 14px;
  color: #242425;
}
.main-campus .area {
  position: absolute;
  right: 0;
  top: 0;
  width: 272px;
  height: 40px;
}
/* 订单 */
/* 订单列表 */
.main-list {
  width: 1200px;
  height: 625px;
  /* background: orange; */
}
.main-list-tab {
  width: 100%;
  height: 125px;
  border-bottom: #f2f2f2;
  background:#fff;
}
.main-list-tab ul{
  height: 46px;
  border-bottom: 1px solid #E4E4E4;
}
.main-list-tab li {
  float: left;
  margin: 0 16px;
  width: 100px;
  line-height: 45px;
  font-size: 14px;
  color: #5f5f5f;
  text-align: center;
}
.main-list-tab .active {
  color: #ff0000;
  border-bottom: 1px solid #ff0000;
}
.main-list-content {
  width: 1200px;
  height: 100%;
  margin-top: 20px;
}
.list-con-select {
  width: 100%;
  height: 60px;
  margin-top: 10px;
  position: relative;
}
.select-box {
  height: 35px;
  padding-top: 10px;
  float: left;
  margin-bottom: 10px;
}
.select-box em {
  font-size: 14px;
  color: #272727;
  margin-left: 20px;
  margin-right: 5px;
}
.select-box .allkinds {
  width: 273px !important;
  height: 32px !important;
  position: static !important;
}
.selected1 {
  width: 80px;
  position: static !important;
}
.search {
  width: 222px;
}
.search-btn {
  position: absolute;
  right: 100px;
  top: 24px;
  font-size: 14px;
  color: #c7c7c7;
}
.list-con-msg {
  width: 100%;
  height: 120px;
  background: #fff;
  padding-left:20px;
  padding-top:20px;
}
.con-msg-title{
  font-size: 22px;
}
.msg-box{
  font-size: 14px;
  color: #333333;
  margin-top: 20px;
}
.msg-box span:first-child{
  margin-right:40px;
}
.msg-box span:nth-child(2){
  margin-right:700px;
}
.msg-box button{
  width: 89px;
  height: 32px;
  margin-left: 10px;
  border: 0;
  border-radius: 4px;
  color: #ffffff;
  text-align: center;
  margin-top: 4px;
  cursor: pointer;
  outline: none;
  background:#A1A1A1
}
.msg-box .startSend{
  background: #ff0000;
}
.list-con-title {
  width: 1197px;
  height: 54px;
  border-color: #e8e8e8;
  border-radius: 4px;
  background: #fafafa;
  display: flex;
  align-items: center;
}
.list-con-title input {
  margin-left: 5px;
  margin-top: 10px;
}
.list-con-title p {
  font-size: 14px;
  color: #272727;
  margin-left: 30px;
  margin-right: 9px;
}
.list-con-items {
  width: 100%;
}
.con-items-box {
  width: 100%;
  height: 72px;
  display: flex;
  line-height: 72px;
  border-bottom: 1px solid #e8e8e8;
}
.con-items-box input {
  margin-top: 30px;
  margin-left: 10px;
}
.list-con-items p {
  margin-left: 20px;
  margin-right: 16px;
  font-size: 14px;
  color: #666666;
}
.list-con-items .somebtn em {
  color: #ff0000;
}
.el-button--text{
  color: #ff0000;
}

/* 内容结束 */
</style>
